<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-spin :spinning="loading">
      <a-row :gutter="12">
        <a-col :md="24" :lg="12" :offset="6" class="userInfoHtml">
          <a-card :bordered="false" class="aCard">
            <div class="account-center-avatarHolder">
              <div class="model_title">个人信息</div>
              <div class="ant-upload-preview" @click="$refs.modal.edit(1)" style="cursor: pointer;">
                <a-icon type="cloud-upload-o" class="upload-icon" />
                <div class="mask">
                  <a-icon type="plus" />
                </div>
                <img :src="option.img" />
                <!-- <a-avatar :size="64" icon="user" :src="picPrefixUrl+option.img" /> -->
              </div>
              <div class="username">
                <label class="formLabel">姓名：</label>
                {{ userInfo.name }}
              </div>
              <div class="bio">
                <label class="formLabel">昵称：</label>
                <a-input v-model="userInfo.nickname" placeholder="请输入用户昵称" style="width:160px;" />
                <span class="formLabel"></span>
                <a-alert class="userInfoAlert" message=" “昵称”将用于家长端中的家校互动展示" type="info" showIcon />
              </div>
              <div style="margin-left:124px;margin-top:14px;">
                <a-button type="primary"
                  @click="saveUserInfo({ name: userInfo.name, nickname: userInfo.nickname, school_id: $store.state.user.school }, 'nikename')">更新信息</a-button>
              </div>
            </div>

            <!-- <a-divider :dashed="true" /> -->
          </a-card>
          <a-card :bordered="false" class="aCard">
            <div class="account-center-avatarHolder">
              <div class="model_title">账号与密码</div>
              <div class="username">
                <label class="formLabel">手机号：</label>
                {{ userInfo.phone }}
              </div>
              <div class="bio">
                <label class="formLabel">登陆密码：</label>
                <a-input-password v-model="password" placeholder="6-16位数字或字母，区分大小写" style="width:300px;" />
                <br />
              </div>
              <div style="margin-left:124px;margin-top:24px;">
                <a-button
                  @click="saveUserInfo({ name: userInfo.name, password: password, school_id: $store.state.user.school }, 'pass')">保存</a-button>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }"></a-col>
      <upload-avatar ref="modal" @ok="setavatar" />
    </a-spin>
  </div>
</template>

<script>
import { PageView, RouteView } from '@/layouts'
import { getInfo, changeUserInfo } from '@/api/login'
import uploadAvatar from '@/components/uploadAvatar'

export default {
  components: {
    RouteView,
    PageView,
    uploadAvatar
  },
  data() {
    return {
      loading: true,
      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
      tagInputVisible: false,
      tagInputValue: '',
      teams: [],
      teamSpinning: true,
      noTitleKey: 'app',
      userInfo: {
        name: '',
        avatar: '',
        nickname: '',
        phone: '',
        homework_notice: false,
        comment_notice: false,
        id: null
      },
      password: '',
      option: {
        img: '',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
      }
    }
  },
  created() {
    this.getDefaultInfo()
  },
  methods: {
    getDefaultInfo() {
      this.loading = true
      getInfo({ school_id: this.$store.state.user.school })
        .then(res => {
          this.userInfo = res
          if (res.avatar && res.avatar.url) {
            this.option.img = res.avatar.url
          }
        })
        .catch(err => {
          this.$message.error(err.data.message || '获取个人信息失败')
        })
        .finally((this.loading = false))
    },
    setavatar(res) {
      //上传图片
      this.option.img = res.url
      this.userInfo.avatar = res
    },

    handleInputChange(e) {
      this.tagInputValue = e.target.value
    },

    handleTagInputConfirm() {
      const inputValue = this.tagInputValue
      let tags = this.tags
      if (inputValue && !tags.includes(inputValue)) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        tagInputVisible: false,
        tagInputValue: ''
      })
    },
    saveUserInfo(data, type) {
      let uid = this.userInfo.id
      let params = JSON.parse(JSON.stringify(data))
      params.role_ids = this.userInfo.roleID
      console.log(data)
      if (type == 'pass') {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
        if (!reg.test(data.password)) {
          this.$message.warning('6-16位数字+字母，区分大小写')
          return
        }
      }
      if (uid) {
        if (params) {
          if (params.comment_notice != undefined || params.homework_notice != undefined) {
            changeUserInfo(Object.assign(params, { avatar: this.userInfo.avatar }), uid)
              .then(res => {
                this.getDefaultInfo()
              })
              .catch(err => {
                this.$message.error(err.data.message || '设置失败')
                this.getDefaultInfo()
              })
          } else {
            changeUserInfo(Object.assign(params, { avatar: this.userInfo.avatar }), uid)
              .then(res => {
                this.$message.success('设置成功！')
                if (params.password) {
                  this.password = ''
                }
                this.getDefaultInfo()
              })
              .catch(err => {
                this.$message.error(err.data.message || '设置失败')
                this.getDefaultInfo()
              })
          }
        }
      } else {
        this.$message.error(err.data.message || '获取数据失败，请刷新页面或退出重新登录')
      }
    }
  }
}
</script>
<style lang="less">
.userInfoHtml {
  .ant-card {
    .ant-card-body {
      padding: 12px !important;
    }
  }
}
</style>
<style lang="less" scoped>
.userInfoAlert {
  padding: 8px;
  padding-left: 37px;
  background-color: rgba(0, 0, 0, 0);
  margin-left: 100px;
  border: none;
  display: block;
  position: relative;
  left: -16px;
}

.formLabel {
  display: inline-block;
  width: 100px;
  text-align: right;
  min-height: 14px;
}

.aCard {
  margin-bottom: 24px;
}

.model_title {
  text-align: left;
  font-weight: 500;
  display: block;
  font-size: 18px;
  color: #333;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e8e8e8;
}

.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    margin-bottom: 24px;

    &>.avatar {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 24px;
      margin-bottom: 20px;

      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
      font-weight: 500;
      margin: 0 24px;
      margin-bottom: 20px;
    }

    .bio {
      color: rgba(0, 0, 0, 0.85);
      margin: 0 24px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      padding-left: 26px;
      position: relative;
    }

    i {
      position: absolute;
      height: 14px;
      width: 14px;
      left: 0;
      top: 4px;
      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
    }

    .title {
      background-position: 0 0;
    }

    .group {
      background-position: 0 -22px;
    }

    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }

  .account-center-team {
    .members {
      a {
        display: block;
        margin: 12px 0;
        line-height: 24px;
        height: 24px;

        .member {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 24px;
          max-width: 100px;
          vertical-align: top;
          margin-left: 12px;
          transition: all 0.3s;
          display: inline-block;
        }

        &:hover {
          span {
            color: #1890ff;
          }
        }
      }
    }
  }

  .tagsTitle,
  .teamTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
  }
}

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin-left: 128px;
  width: 100%;
  max-width: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1rem;
    // padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -0.5rem;
      margin-top: -0.5rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
  }
}
</style>